<template>
    <div>
        <el-form :model="form" ref="form" label-width="120px">
            <el-form-item label="故障描述" prop="fault" :rules="{ required: true, message: '故障描述不能为空', trigger: 'blur' }">
                <el-input type="textarea" v-model="form.fault" auto-complete="off" placeholder="请输入设备序列号" clearable></el-input>
            </el-form-item>
            <el-form-item label="修复方法" prop="detail">
                <el-input type="textarea" v-model="form.detail" auto-complete="off" placeholder="请输入修复方法" clearable></el-input>
            </el-form-item>
            <el-form-item label="日期" prop="date">
                <el-date-picker type="date" v-model="form.date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="请选择维修日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="维修类别" prop="status" :rules="{ required: true, message: '维修状态不能为空', trigger: 'blur' }">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1" border>未完成</el-radio>
                    <el-radio :label="2" border>已完成</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="维修类别" prop="type" :rules="{ required: true, message: '维修类别不能为空', trigger: 'blur' }">
                <el-radio-group v-model="form.type">
                    <el-radio :label="1" border>普通维修</el-radio>
                    <el-radio :label="2" border>厂商更换</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label="更换后序列号"
                prop="serial"
                :rules="(form.status ===2 && form.type === 2) ? { required: true, message: '更换后的序列号不能为空', trigger: 'blur' } : null"
                v-if="form.type === 2"
            >
                <el-input v-model="form.serial" auto-complete="off" placeholder="请输入更换后的序列号" clearable></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" auto-complete="off" placeholder="请输入备注" clearable></el-input>
            </el-form-item>
            <div v-if="form.type===1">
                <el-row :gutter="20" v-for="(repairPart, index) in form.RepairParts" :key="repairPart.id || repairPart.key">
                    <el-col :span="14">
                        <el-form-item
                            :label="'配件' + (index+1)"
                            :prop="'RepairParts.' + index + '.part_id'"
                            :rules="{required: true, message: '请选择配件', trigger: 'blur'}"
                        >
                            <el-select v-model="repairPart.part_id" placeholder="请选择配件" filterable clearable style="width:500px">
                                <el-option
                                    v-for="item in partStoreList"
                                    :key="item.Part.id"
                                    :label="`${item.Part.name}, 货号:${item.Part.no}, 规格:${item.Part.model}`"
                                    :value="item.Part.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="数量"
                            :prop="'RepairParts.' + index + '.count'"
                            :rules="{required: true, message: '请输入数量', trigger:'blur'}"
                        >
                            <el-input-number v-model="repairPart.count" controls-position="right" :min="1" size="small"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click.prevent="removeDomain(repairPart)" type="danger" icon="el-icon-minus" size="small">删除</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-form-item>
                <el-button @click="addDomain" type="success" icon="el-icon-plus" v-if="form.type === 1">添加配件</el-button>
                <el-button type="primary" @click="submit('form')">保 存</el-button>
                <el-button @click="$router.back()">返 回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: { id: null },
    data() {
        return {
            form: {
                RepairParts: [],
                status: 1,
                fault: null,
                detail: null,
                date: new Date(),
                type: 1,
                remark: null,
                device_id: this.$route.query.device_id
            },
            partStoreList: []
        }
    },
    async created() {
        this.id && this.fetch()
        const res = await this.$http.get('/partStoreList')
        if (res && res.code === 0) {
            this.partStoreList = res.returnObject || []
        }
    },
    methods: {
        async fetch() {
            const response = await this.$http.get(`/repair/${this.id}`)
            if (response && response.code === 0) {
                this.form = response.returnObject
            }
        },
        submit(formName) {
            this.$refs[formName].validate(async valid => {
                if (!valid) return false
                if (this.id) {
                    const response = await this.$http.put(`/repair/${this.id}`, this.form)
                    if (response && response.code === 0) {
                        this.$message.success('修改成功')
                        this.$router.push({ name: 'deviceRepairList', params: { id: this.form.device_id } })
                    }
                } else {
                    const res = await this.$http.post('/repair', this.form)
                    if (res && res.code === 0) {
                        this.$message.success('添加成功')
                        this.$router.push({ name: 'deviceRepairList', params: { id: this.form.device_id } })
                    }
                }
            })
        },
        removeDomain(item) {
            let index = this.form.RepairParts.indexOf(item)
            if (index !== -1) {
                this.form.RepairParts.splice(index, 1)
            }
        },
        addDomain() {
            this.form.RepairParts.push({ id: null, key: Date.now(), count: 1 })
        }
    }
}
</script>

<style scoped></style>
